<script setup lang="ts">
import { getInform } from '@/api/msg'
import type { Page } from '@/types'
import type { MsgTable } from '@/types/msg'
import { dateFormat } from '@/util/dict'
import { onMounted, ref } from 'vue'
import Scrollbar from '@/components/Scrollbar.vue'
import { authXSS } from '@/util/token'
const page = ref<Page<MsgTable>>({
  num: 1,
  size: 10,
  rows: [],
  count: 0
})
onMounted(() => {
  getInform(
    page.value,
    {
      status: '1'
    },
    { time: 'desc' }
  ).then((data) => {
    page.value = data.data
  })
})

// 底部状态
const buttomStatus = ref<'none' | 'loading' | 'loaded' | 'nomal'>('loaded')
// 触底刷新事件
function onScrollDown() {
  if (buttomStatus.value == 'loading') {
    return
  }
  page.value.num++
  buttomStatus.value = 'loading'
  setTimeout(() => {
    getInform(page.value, {}, { time: 'desc' })
      .then((data) => {
        page.value.rows.push(...data.data.rows)
        if (data.data.rows.length == 0) {
          page.value.num--
          buttomStatus.value = 'nomal'
        } else {
          buttomStatus.value = 'loaded'
        }
      })
      .catch(() => {
        page.value.num--
        buttomStatus.value = 'loaded'
      })
  }, 700)
}
</script>
<template>
  <Scrollbar @scroll-down="onScrollDown" height="70vh" :down-distance="50">
    <el-card shadow="hover" v-for="item in page.rows">
      <el-descriptions direction="vertical" :title="item.title" :column="2">
        <el-descriptions-item label="发布人：" :span="1"
          ><span class="highlight-info">{{ item.send }}</span></el-descriptions-item
        >
        <el-descriptions-item label="时间：" :span="1"
          ><span class="highlight-success">{{ dateFormat(item.time!) }}</span></el-descriptions-item
        >
        <el-descriptions-item label="内容：" :span="2"
          ><div v-html="authXSS(item.msg!)"></div
        ></el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-row>
      <el-col v-if="page.rows.length == 0"><el-empty /></el-col>
      <el-col @click="onScrollDown" class="load-more" v-show="buttomStatus == 'loaded'" :span="24"
        >点击加载更多数据</el-col
      >
      <el-col v-show="buttomStatus == 'loading'" :span="24">加载中</el-col>
      <el-col v-show="buttomStatus == 'nomal'" :span="24">没有更多数据了</el-col>
    </el-row>
  </Scrollbar>
</template>
<style scoped lang="less">
.el-card {
  margin: 20px;
}

.el-col {
  user-select: none;
  text-align: center;
}

.load-more {
  cursor: pointer;
}
</style>
